<template>
	<view>
		<view class="search-wrapper">
			<icon type="search"></icon>
			<input type="text" v-bind:value="value"  placeholder="请输入你要搜索的商品" @confirm="$emit('confirm')" @input="inputHand"/>
			<button type="default" v-if="value" @tap="$emit('clear')">取消</button>
		</view>
	</view>
</template>

<script>
	export default {
		name:"searchBox",
		props:{
			value:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			inputHand(event){
				// console.log(value)
				this.$emit('input', event.target.value)
			}
		}
	}
</script>

<style lang="less">
	.search-wrapper {
		display: flex;
		background-color: #eeeeed;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		
		icon {
			top: 30rpx;
			left: 20rpx;
			position: absolute;
		}
		
		input {
			flex: 1;
			height: 60rpx;
			background-color: #FFFFFF;
			font-size: 20rpx;
			padding-left: 60rpx;
			margin-right: 10rpx;
		}
		button {
			width: 150rpx;
			height: 60rpx;
			font-size: 25rpx;
			line-height: 60rpx;
		}
	}
</style>
